<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>学生管理</title>
		<style type="text/css">
			#etable {
				width: 600px;
				border: solid 1px #333;
				border-collapse: collapse;
			}

			tr

			/*第（1）空，设置表格所有行的样式*/
				{
				height: 30px;
			}

			th {
				border: solid 1px #333;
			}

			td {
				border: solid 1px #333;
				text-align: center;
			}

			td a {
				margin-right: 10px;
				color: red
			}

			#popdiv,
			#popchange {
				width: 500px;
				padding: 10px;
				border: solid 1px red;
				position: absolute;
				/*第（2）空，设置模态框绝对定位*/
				left: 26%;
				top: 100px;
				background: #fff;
				display: none;
				/*第（3）空，设置模态框开始是隐藏状态*/
				z-index: 999;
				/*第（4）空，设置模态框显示在最上层*/
			}

			#popdiv p {
				border-bottom: solid 1px red
			}

			.mask {
				opacity: 0.4;
				background: #000;
				position: absolute;
				/*第（2）空，设置模态框绝对定位*/
				left: 0;
				top: 0;
				width: 100%;
				height: 650px;
			}
		</style>
		<!--<script src="  (5)   " type="text/javascript"></script>-->
		<script src="js/jquery-3.4.1.js" type="text/javascript"></script>
		<script>
			$(function() {
				var index = -1; /*第（6）空，定义变量并赋值*/
				//点击查看
				$('.view').click(function() {
					/* 第(7) 空*/
					$('<div class="mask"></div)>').appendTo($('body'));
					var arr = [];
					$(this).parent().siblings().each(function() {
						arr.push($(this).text()); /*想数组的末尾添加数据*/ /*arr.  (8)   ($(this).text());*/
					});
					$('#popdiv').show().children().each(function(i) {
						$(this).children('span').text(arr[i]);
					});
				});
				//关闭
				$('.close').click(function() {
					$(this).parent().hide();
					$('.mask').hide(); /*隐藏模态框的挡板*/ /*$('.mask').  (9)  ;*/
				});
				//删除
				$('.del').click(function() {
					var conf = confirm('确定要删除吗？');
					if (conf) {
						/*第(10) 空*/
						$(this).parents('tr').remove(); /*删除数据*/ /*$(this).parents('tr').  (11)   ;*/
					}
				});


			});
		</script>
	</head>
	<body>
		<table id="etable">
			<tr>
				<th>姓名</th>
				<th>年龄</th>
				<th>职位</th>
				<th>工资</th>
				<th>操作</th>
			</tr>
			<tr>
				<td>张三</td>
				<td>23</td>
				<td>前端工程师</td>
				<td>6000</td>
				<td><a href="#" class="view">查看</a><a href="#" class="del">删除</a></td>
			</tr>
			<tr>
				<td>李四</td>
				<td>25</td>
				<td>java工程师</td>
				<td>8000</td>
				<td><a href="#" class="view">查看</a><a href="#" class="del">删除</a></td>
			</tr>
			<tr>
				<td>王五</td>
				<td>30</td>
				<td>项目经理</td>
				<td>10000</td>
				<td><a href="#" class="view">查看</a><a href="#" class="del">删除</a></td>
			</tr>
		</table>
		<div id="popdiv">
			<p><strong>姓名：</strong><span></span></p>
			<p><strong>年龄：</strong><span></span></p>
			<p><strong>职位：</strong><span></span></p>
			<p><strong>工资：</strong><span></span></p>
			<a href="#" class="close">关闭</a>
		</div>
		<div id="popchange">
			<p><strong>姓名：</strong><input type="text" id="name" /></p>
			<p><strong>年龄：</strong><input type="text" id="age" /></p>
			<p><strong>职位：</strong><input type="text" id="zhiwei" /></p>
			<p><strong>工资：</strong><input type="text" id="gongzi" /></p>
			<a href="#" class="close">关闭</a>
			<a href="#" class="save">保存</a>
		</div>
	</body>
</html>